<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/dayjs.min.js"></script>

</head>
<!-- 
    过滤器
    定义：对要显示的数据进行格式化后再显示，(适用于一些简单的逻辑处理)
    语法：
      1、注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}}
      2、 使用过滤器：{{XXX |过滤器名}} 或v-bind:属性="XXX | 过滤器名"

      备注：
      过滤器也可以接收额外的参数，多个过滤器可以串联
      并没有改变原有的数据 是产生新的对应的数据

-->

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h2>现在是{{fmtTime}}</h2>
        <!-- methods实现 -->
        <h2>现在是{{getFmtTime()}}</h2>
        <!-- 过滤器时间实现-->
        <h2>现在是{{time | timeFormater}}</h2>
    </div>

    <div id="root2">
        <h2>现在是：{{msg |mySlice }}</h2>
    </div>
    <script>
        Vue.config.productionTip = false;
        //全局过滤器
        Vue.filter('mySlice', function(value) {
            return value.slice(0, 4)
        })
        new Vue({
            el: "#root",
            data: {
                time: 1637047951556 //时间戳
            },
            computed: {
                fmtTime() {
                    return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss')
                }
            },
            methods: {
                getFmtTime() {
                    return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss')
                }
            },
            filters: {
                timeFormater(value) {
                    return dayjs(value).format('YYYY年MM月DD HH: mm: ss ')
                }
            },

        })


        new Vue({
            el: "#root2",
            data: {
                msg: '202111'
            }
        })
    </script>
</body>

</html>